<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">  
	<link rel="stylesheet" href="head&kk.css">
	<title>Document</title>

	<style>
		#bd{
			background-image: url(img/01.png);
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;    
		    height:491px;  
		    z-index: 1;
		}
		#bd_2{
			background-image: url(img/02.png);
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;    
		    height:491px;  
			z-index: 2;
			display: none;
		}
		.cont_top{
			height: 206px;
			width: 136px;
			position: absolute;
			padding-left: 85px;
			z-index: 3;
			padding-top: 59px;
		}
		.cont_bottom{
			height: 68px;
			width: 146px;
			margin: 0 auto;
			position: absolute;
			padding-left: 95px;
			padding-top: 60px;
			z-index: 4;
		}
		.bottom_one img{
			padding-top: 340px;
		    position: absolute;
		    padding-left: 70px;
		}
		.bottom_one{display: none;}
		.bottom_two{display: none;}
		.bottom_two img{
			padding-top: 410px;
		    position: absolute;
		    padding-left: 110px;
		}
		svg{
			margin-bottom: 0px;
		}
	</style>
</head>
<body>
	<div class="page">
		<svg xmlns="http://www.w3.org/2000/svg" width="322" height="48" viewBox="0 0 322 48" style="margin-bottom: -4px;"><path fill="#F6F9FA" d="M0 48v-4.052C0 23.389 16.911 8.571 37.225 6.723c0 0 61.917-3.723 123.819-3.723 61.872 0 123.73 3.723 123.73 3.723C305.329 8.571 322 23.389 322 43.948V48"/></svg>
		<div class="header">
			<h1 class="head_name">邀请函</h1>
		</div>
		<div class="content">
			<!-- 音频图标 -->
			<div class="icon">
				<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
			</div>

			<div id="bd"> 
				<div id="bd_2">
					<div class="cont_top">
						<img src="img/07116.png" alt="">
					</div>
					<div class="cont_bottom">
						<img src="img/yqh.png" alt="">
					</div>
					<div class="bottom_one">
						<img src="img/03.png" alt="">
					</div>
					<div class="bottom_two">
						<img src="img/04.png" alt="">
					</div>
				</div>
				<svg xmlns="http://www.w3.org/2000/svg" width="322" height="45" viewBox="0 0 322 45"><path fill="#F6F9FA" d="M322 0v4.052c0 20.559-16.671 35.377-37.225 37.225 0 0-61.857 3.723-123.73 3.723-61.902 0-123.819-3.723-123.819-3.723C16.911 39.429 0 24.611 0 4.052V0"/></svg>
			</div>
			
		</div>
		<div class="auds">
			<!-- 音频文件 -->
			<audio src="i/1.mp3" controls="controls" autoplay="autoplay" id="audio" ></audio>
		</div>
		
	</div>
	
  


	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#bd_2").fadeIn(500);
			$(".cont_top").animate({top:'130px'},"6000");
			$(".cont_bottom").animate({bottom:'535px'},"100")
			$(".bottom_one").fadeIn(3000);
			$(".bottom_two").fadeIn(3000);
			$(".icon").click(function(){
				var audioEle=$("#audio")[0];
				audioEle.play();
				audioEle.pause();
			})
	
		})
	
	</script>
</body>
</html>